/*
 * @Author: 江舟 jijiangzhou@recycloud.cn
 * @Date: 2024-06-07 14:32:42
 * @LastEditors: 江舟 jijiangzhou@recycloud.cn
 * @LastEditTime: 2024-08-07 21:41:57
 * @FilePath: \vite-project\src\components\common\CommonPreview.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import { getImageAndFileType } from 'utils/helper';
import { Icon } from '@iconify/react/dist/iconify.js';
import { App, Image, Space } from 'antd';
import { useState } from 'react';
import { Base64 } from 'js-base64';
import React from 'react';

const CommonPreview: React.FC<{ fileList: any[] }> = ({ fileList = [] }) => {
    const [previewUrl, setPreviewUrl] = useState('');
    const [visible, setVisible] = useState(false);
    const { message } = App.useApp();
    const onPreview = (url) => {
        if (getImageAndFileType(url || '') !== 'images') {
            const previweSrc = `${
                import.meta.env.VITE_NODE_ENV === 'prod' ? '' : 'http://10.20.1.250:82'
            }/fileview/onlinePreview?url=${encodeURIComponent(Base64.encode(url))}`;
            window.open(previweSrc);
            return;
        }
        if (url) {
            setPreviewUrl(url || '');
            setVisible(true);
        }
    };
    return (
        <div>
            {fileList?.map((file, index) => {
                let type = getImageAndFileType(file.url || '');
                return (
                    <div
                        className='flex items-center justify-between w-full box-border p-12px pr-24px mb-12px last:mb-0 rounded-4px bg-gray-100'
                        key={index}
                    >
                        {
                            {
                                pdf: <Icon className='text-red text-24px' icon='ant-design:file-pdf-outlined' />,
                                images: <img className='w-60px h-60px' src={file.url} alt='attachment' />,
                            }[type]
                        }
                        <div className='flex-1 line-clamp-1 mx-12px'>{file.url}</div>
                        <Space>
                            <a onClick={() => onPreview(file.url || '')}>预览</a>
                            <a target='_blank' href={file.url}>
                                下载
                            </a>
                        </Space>
                    </div>
                );
            })}
            <Image
                width={200}
                style={{ display: 'none' }}
                src={previewUrl}
                preview={{
                    visible,
                    src: previewUrl,
                    onVisibleChange: (value: any) => {
                        setVisible(value);
                    },
                }}
            />
        </div>
    );
};

export default CommonPreview;
